<template>
  <div id="item-detail">

<!--骨架屏-->
    <div v-if="isLoading">
      <div class="swipe-item"></div>
      <div class="base">
        <span class="price">       </span>
        <div class="coupon"></div>
        <span class="month-payed"></span>
        <span class="item-name"></span>
      </div>
      <!--货物信息-->
      <div class="base" style="height: 1.7rem">
        <div @click="choose.action" class="choose-item"
             v-for="(choose, index) in chooseItem" :key="index">
          <div>
            <span style="margin-right: 0.2rem"></span>
            <span style="color: black"></span>
          </div>
        </div>
      </div>

      <!--商品导航-->
      <GoodsAction>
        <GoodsActionIcon icon="chat-o" />
        <GoodsActionIcon icon="cart-o"/>
        <GoodsActionIcon icon="star"/>
        <GoodsActionButton type="warning"/>
        <GoodsActionButton type="danger"/>
      </GoodsAction>
    </div>
<!--真实内容-->
    <div v-else>
      <!--搜索框-->
      <Sticky>
        <Search id="searchBox" shape="round" @search="onSearch()" v-model="searchVal" placeholder="请输入搜索关键词">
          <slot slot="left" name="left">
            <div class="revoke">
              <Icon name="revoke" @click="onRevoke()"></Icon>
            </div>
          </slot>
        </Search>
      </Sticky>
      <!--轮播图-->
      <Swipe :autoplay="3000" indicator-color="white">
        <SwipeItem class="swipe-item" v-for="(imgUrl, index) in item.imgUrls" :key="index">
          <VanImg :src="imgUrl" fit="fill"/>
        </SwipeItem>
      </Swipe>
      <!--基本信息-->
      <div class="base" style="height: 2.5rem;">
        <span class="price">￥{{item.price}}</span>
        <div class="coupon">
          这是一张券
        </div>
        <span class="month-payed">月销{{item.monthPayed}}</span>
        <span class="item-name">{{item.name}}</span>
      </div>
      <!--货物信息-->
      <div class="base" style="height: 1.7rem">
        <div @click="choose.action" class="choose-item"
             v-for="(choose, index) in chooseItem" :key="index">
          <div>
            <span style="margin-right: 0.2rem">{{choose.name}}</span>
            <span style="color: black">{{choose.info}}</span>
          </div>
          <Icon v-if="choose.action!==onNull" name="arrow"></Icon>
        </div>
      </div>

      <!-- 宝贝评价-->
      <div class="base">
        <div class="comment-base">
          <span class="comment-title">宝贝评价(31)</span>
          <span class="comment-check">查看全部</span>
        </div>
        <hr/>
        <div class="comment-custom">
          <div class="comment-head">
            <VanImg fit="fill" width="100%" height="100%"
                    src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=868057542,3295881756&fm=26&gp=0.jpg"></VanImg>
          </div>
          <div class="comment-tag">
            <span class="comment-name">一叽咕</span>
            <span class="comment-time">9天前</span>
          </div>
        </div>
        <span class="comment-content">哇，这个简直是太值了吧，5分好评！！！(5毛钱一条，括号内容删掉)</span>
      </div>

      <!--店铺信息-->
      <div class="base">
        <div class="shop-top">
          <div class="shop-info">
            <div class="shop-head">
              <VanImg fit="fill" width="100%" height="100%"
                      src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=394259797,1684286832&fm=26&gp=0.jpg"></VanImg>
            </div>
            <div class="shop-tag">
              <span class="shop-name">二次元专卖店</span>
              <div>
                <span>总评分</span>
                <Rate v-model="totalScore" readonly allow-half size="0.15rem" color="#ffd21e" void-icon="star"
                      void-color="#eee"/>
              </div>
            </div>
          </div>
          <div class="shop-score">
            <div><span>宝贝描述 <span class="score">4.5</span></span></div>
            <div><span>服务态度 <span class="score">4.8</span></span></div>
            <div><span>快递物流 <span class="score">4.0</span></span></div>
          </div>
        </div>
        <VanBtn round size="mini" color="linear-gradient(to right, #ff6034, #ee0a24)">进店逛逛</VanBtn>
      </div>
      <!--宝贝描述 卖家服务 物流服务-->

      <div style="height: 1rem"></div>
      <!--商品导航-->
      <GoodsAction>
        <GoodsActionIcon @click="onChat" icon="chat-o" text="客服"/>
        <GoodsActionIcon @click="onCart" icon="cart-o" text="购物车" :badge="getCartNum"/>
        <GoodsActionIcon @click="onCollect" icon="star" :color="getCollectColor" text="收藏"/>
        <GoodsActionButton @click="onChooseSpecs(1)" type="warning" text="加入购物车"/>
        <GoodsActionButton @click="onChooseSpecs(2)" type="danger" text="立即购买"/>
      </GoodsAction>

      <!--选择弹出层-->
      <Popup v-model="showSelect" round position="bottom" :style="{ height: '80%' }">
        <div class="select-pop">
          <div class="select-head">
            <div class="select-img">
              <VanImg fit="fill" width="100%" height="100%" :src="getSelectItem"></VanImg>
            </div>
            <span class="select-price">￥{{item.price}}</span>
          </div>
          <Divider style="margin: 0"/>
          <div class="select-address">
            <div class="address-area">
              配送区域
              <span>(配送地可能会影响库存,请正确选择)</span>
            </div>
            <div class="my-address">
              <Icon name="location-o"></Icon>
              广州市 海珠区 广州塔顶层
            </div>
          </div>
          <Divider style="margin: 0"/>
          <div style="margin: 0.2rem 0">
            商品列表
          </div>
          <Divider style="margin: 0"/>
          <div class="select-num">
            <div>
              <span>购买数量</span> 库存874件
            </div>
            <Stepper input-width="0.55rem" button-size="0.55rem" v-model="buyNum"/>
          </div>
          <div v-if="selectType !== 0" @click="onChooseSubmit" class="select-btn">
            确定
          </div>
          <div v-else class="select-btn">
            <div @click="onChooseSubmit(1)" class="first-btn">加入购物车</div>
            <div @click="onChooseSubmit(2)">立即购买</div>
          </div>
        </div>
      </Popup>

      <!--参数弹出层-->
      <Popup v-model="showParam" round position="bottom" :style="{ height: '80%' }">
        <NavBar title="参数"/>
        <List>
          <Cell v-for="(item, index) in paramList" :key="index" :title="item.title" :value="item.value"/>
        </List>
      </Popup>
    </div>

  </div>
</template>

<script>
import {
  Sticky,
  Icon,
  Search,
  Swipe,
  SwipeItem,
  Image as VanImg,
  Rate,
  Button as VanBtn,
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
  Popup,
  NavBar,
  List,
  Cell,
  Stepper,
  Divider,
  Toast
} from 'vant'

export default {
  name: 'ItemDetail',
  components: {
    Sticky,
    Icon,
    Search,
    Swipe,
    SwipeItem,
    VanImg,
    Rate,
    VanBtn,
    GoodsAction,
    GoodsActionIcon,
    GoodsActionButton,
    Popup,
    NavBar,
    List,
    Cell,
    Stepper,
    Divider
  },
  data () {
    return {
      isLoading: true,
      searchVal: '',
      item: null,
      chooseItem: [],
      totalScore: 3.9,
      isCollect: false,
      showParam: false,
      paramList: [],
      showSelect: false,
      buyNum: 1,
      selected: 0,
      selectType: 0,
      cartNum: 0
    }
  },
  created () {
    new Promise(resolve =>
      setTimeout(() => resolve(), 300)
    ).then(() => {
      this.isLoading = false
      this.getItemDetail(this.$route.query.id)
      this.chooseItem = [
        {name: '选择', info: '颜色分类 / 大小', action: this.onChooseSpecs},
        {name: '发货', info: '广东广州 | 快递费: 10.00元', action: this.onNull},
        {name: '活动', info: '开发领3元通用红包！', action: this.onActivity},
        {name: '参数', info: '品牌 型号...', action: this.onParam}
      ]
      this.paramList = [
        {title: '品牌', value: '天龙人'},
        {title: '规格', value: '88 X 99'},
        {title: '货号', value: 'BLEACH-88'},
        {title: '价格类型', value: '计件'},
        {title: '增值服务', value: '现货48小时内发货'},
        {title: '重量', value: '0.1g'},
        {title: '其他', value: '随便'}
      ]
    })
  },
  methods: {
    onSearch () {
      this.$router.push({name: 'searchList', params: {searchVal: this.searchVal}})
    },
    onRevoke () {
      this.$router.go(-1)
    },
    getItemDetail (id) {
      this.item = {
        id: 1,
        name: '出售一张超级帅的死神图片',
        price: 29.9,
        payedNum: 4325,
        address: '广州',
        monthPayed: 99,
        shop_id: 5,
        imgUrls: [
          'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=868057542,3295881756&fm=26&gp=0.jpg',
          'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=394259797,1684286832&fm=26&gp=0.jpg',
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201309%2F26%2F20130926111655_HVhMR.thumb.700_0.jpeg&refer=http%3A%2F%2Fimg3.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1615610503&t=a7cc0319a57fd0e904099fa138d8a932',
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdik.img.kttpdq.com%2Fpic%2F3%2F2017%2F83a5a0558f351abd.jpg&refer=http%3A%2F%2Fdik.img.kttpdq.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1615610503&t=696094e5c130d9712e0b43686911fa45'
        ]
      }
    },
    onChooseSpecs (e, selectType = 0) {
      this.selectType = selectType
      this.showSelect = true
    },
    onNull () {
      //  空函数
    },
    onActivity () {
      Toast('活动尚未开启')
    },
    onParam () {
      this.showParam = true
    },
    onCollect () {
      this.isCollect = !this.isCollect
    },
    onChooseSubmit (selectType) {
      this.showSelect = false
      selectType = selectType || this.selectType
      if (selectType === 1) {
        this.cartNum += this.buyNum
      } else {
        Toast(`你购买了${this.cartNum + this.buyNum}件商品`)
        this.cartNum = 0
      }
    },
    onCart () {
      if (this.cartNum === 0) {
        Toast(`购物车还没有任何东西`)
      } else {
        Toast(`购物车被清空了！`)
        this.cartNum = 0
      }
    },
    onChat () {
      this.$router.push({name: 'Chat', params: {id: this.item.shop_id}})
    }
  },
  computed: {
    getCollectColor () {
      return this.isCollect ? '#ff5000' : '#323233'
    },
    getSelectItem () {
      return this.item.imgUrls[this.selected]
    },
    getCartNum () {
      return this.cartNum === 0 ? '' : this.cartNum
    }
  }
}
</script>

<style scoped lang="less">
  #item-detail {
    font-size: 0.5rem;
    background-color: whitesmoke;
    min-height: 100%;

    .skeleton {
      .swipe-item {
        width: 100%;
        height: 3.2rem;
        background-size: cover;
      }

      .base {
        font-size: 0.1rem;
        color: darkgrey;
        margin: 0.25rem 0.2rem 0.2rem;
        border-radius: 0.2rem;
        padding: 0.25rem;
        background-color: white;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .price {
          font-size: 0.35rem;
          background-color: orangered;
          display: inline-block;
          width: 3rem;
          height: 0.8rem;
        }

        .month-payed {
          font-size: 0.1rem;
          color: darkgrey;
          display: inline-block;
          width: 1rem;
          height: 0.8rem;
        }

        .item-name {
          font-size: 0.2rem;
          color: black;
          font-weight: bold;
          display: inline-block;
          width: 1rem;
          height: 0.8rem;
        }

        .coupon {
          display: flex;
          align-items: center;
          font-size: 0.3rem;
          color: white;
          background: linear-gradient(90deg, red, orangered);
          border-radius: 0.2rem;
          width: 2rem;
          height: 3rem;
        }

        .choose-item {
          display: flex;
          justify-content: space-between
        }
      }
    }

    /*下面为非骨架屏*/

    .revoke {
      margin-right: 10px
    }

    .swipe-item {
      width: 100%;
      height: 3.2rem;
      background-size: cover;
    }

    .base {
      font-size: 0.1rem;
      color: darkgrey;
      margin: 0.25rem 0.2rem 0.2rem;
      border-radius: 0.2rem;
      padding: 0.25rem;
      background-color: white;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .price {
        font-size: 0.35rem;
        color: orangered
      }

      .month-payed {
        font-size: 0.1rem;
        color: darkgrey
      }

      .item-name {
        font-size: 0.2rem;
        color: black;
        font-weight: bold
      }

      .coupon {
        display: flex;
        align-items: center;
        font-size: 0.3rem;
        color: white;
        background: linear-gradient(90deg, red, orangered);
        border-radius: 0.2rem;
        padding: 0.2rem
      }

      .choose-item {
        display: flex;
        justify-content: space-between
      }

      .comment-base {
        margin: 0.1rem 0;
        display: flex;
        justify-content: space-between;

        .comment-title {
          font-size: 0.25rem;
          color: black;
          font-weight: bold;
        }

        .comment-check {
          font-size: 0.1rem;
          color: orangered;
        }
      }

      .comment-custom {
        display: flex;
        margin: 0.1rem 0;

        .comment-head {
          height: 0.7rem;
          width: 0.7rem;
          border-radius: 0.7rem;
          overflow: hidden;
          margin-right: 0.1rem;
        }

        .comment-tag {
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .comment-name {
            color: black;
          }
        }
      }

      .comment-content {
        color: darkgrey;
      }

      .shop-top {
        display: flex;
        justify-content: space-between;

        .shop-info {
          display: flex;
          margin: 0.1rem 0;

          .shop-head {
            height: 1rem;
            width: 1rem;
            margin-right: 0.2rem;
            border-radius: 0.2rem;
            overflow: hidden;
          }

          .shop-tag {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .shop-name {
              color: black;
            }
          }
        }

        .shop-score {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin: 0.1rem 0;

          div {
            transform: scale(0.8);

            .score {
              color: black;
            }
          }
        }
      }
    }

    /*选择弹窗*/

    .select-pop {
      font-size: 0.2rem;
      margin: 0 0.2rem;

      .select-head {
        margin: 0.2rem 0;
        display: flex;

        .select-img {
          width: 1.2rem;
          height: 1.2rem;
          margin-right: 0.3rem
        }

        .select-price {
          font-size: 0.4rem;
          color: orangered
        }
      }

      .select-address {
        margin: 0.2rem 0;

        .address-area {
          color: black;
          margin-bottom: 0.2rem;

          span {
            color: lightgrey;
            transform: scale(0.8)
          }
        }

        .my-address {
          color: darkgrey
        }
      }

      .select-num {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0.2rem 0
      }

      .select-btn {
        position: fixed;
        bottom: 0.1rem;
        width: calc(100% - 0.4rem);
        border-radius: 0.4rem;
        height: 0.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 0.3rem;
        font-weight: bold;
        background: orangered;
        overflow: hidden;

        div {
          width: 50%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .first-btn {
          background: orange;
        }
      }
    }
  }

</style>
